<?php slot('index','cur'); ?>
<style>
.Contditor {
    white-space:normal;
    word-break: break-all;
}
</style>
<!--主体-->
<div class="wrap-main left">
	<form method="post" action="<?php echo url_for('skill/update'); ?>" id="queryForm">
	<div class="wrap-center">
    	<div class="wrap-cententleft">
		<div class="wrap-editc">
        	<div class="editmenu">
            	<ul class="editns">
                	<li id="icon-image">图片</li>
                    <li id="icon-text">文字</li>
                    <!--<li id="icon-tp">段落</li>-->
                    <li id="icon-movie">视频</li>
                    <li id="icon-music">音频</li>
                    <li id="icon-tp">分段</li>
                </ul>
                <ul class="editbotton">
                    <li><a href="<?php echo url_for('skill/index'); ?>" style="text-decoration: none;color:#333" >放弃编辑</a></li>
                    <!--<li id="formcgao">存为草稿</li>-->
                    <li class="cur" id="formbottom">立即发布</li>
                </ul>
            </div>
            <div class="test_timain">
            	<div class="test_box" id="test_title" contenteditable="true"><?php echo $skill->getTitle(); ?></div>
                <input type="hidden" id="subtitle" name="title">
            </div>
            <!--注意：
                1、在初始化页面时，id="sortable"的ul必须保留；
                2、li标签中的value值，1表示文字，2表示图片，用于内容编辑判断。
            -->
            <div class="test_content">
                <?php echo trim($skill->getRaw('edit_content')); ?>
<!--            	<ul id="sortable">
                    content
                </ul>-->
            </div>
        </div>	
        </div>
        
        <div class="wrap-cententright">
        	<div class="wrap-centqt">
            	<div class="wrap-plt"><i>编辑封面</i></div>
                <?php if(strlen($skill->getCover()) > 0 ): ?>
                <div class="wrap-addfm" id="homeimgdiv" style="line-height: 1.5em; height: auto; background: none;"> <img src="<?php echo $skill->getCover(); ?>" /> </div>
                <?php else: ?>
                <div class="wrap-addfm" id="homeimgdiv"> 添加封面 </div>
                <?php endif; ?>
                
                <input type="hidden" id="homeimg" name="homeimg" value="<?php echo $skill->getCover(); ?>">
                <div class="wrap-addzy"><i>摘要</i><span></span></div>
                <div class="wrap-addzyt"><textarea id="docsmallt" name="docsmallt" placeholder="请输入摘要"><?php echo $skill->getDescription(); ?></textarea></div>
            </div>
            
            <div class="wrap-biaoqian wrap-centqt">
            	<div class="wrap-plt"><i>编辑标签</i></div>
                
                <div class="wrap-addzy"><i>必选标签</i><span></span></div>
                <ul class="wrap-addbqli bx">
                    <li value="1" <?php if($skill->getCategory() == 1): ?> class="cur" <?php endif; ?>>玩具<input type="hidden" class="gotta" name="gotta[]" value="<?php if($skill->getCategory() == 1): echo $skill->getCategory(); ?><?php endif; ?>"></li>
                    <li value="2" <?php if($skill->getCategory() == 2): ?> class="cur" <?php endif; ?>>游戏<input type="hidden" class="gotta" name="gotta[]" value="<?php if($skill->getCategory() == 2): echo $skill->getCategory(); ?><?php endif; ?>"></li>
                    <li value="3" <?php if($skill->getCategory() == 3): ?> class="cur" <?php endif; ?>>手工<input type="hidden" class="gotta" name="gotta[]" value="<?php if($skill->getCategory() == 3): echo $skill->getCategory(); ?><?php endif; ?>"></li>
                    <li value="4" <?php if($skill->getCategory() == 4): ?> class="cur" <?php endif; ?>>绘本<input type="hidden" class="gotta" name="gotta[]" value="<?php if($skill->getCategory() == 4): echo $skill->getCategory(); ?><?php endif; ?>"></li>
                    <li value="5" <?php if($skill->getCategory() == 5): ?> class="cur" <?php endif; ?>>绘画<input type="hidden" class="gotta" name="gotta[]" value="<?php if($skill->getCategory() == 5): echo $skill->getCategory(); ?><?php endif; ?>"></li>
                    <li value="6" <?php if($skill->getCategory() == 6): ?> class="cur" <?php endif; ?>>旅游<input type="hidden" class="gotta" name="gotta[]" value="<?php if($skill->getCategory() == 6): echo $skill->getCategory(); ?><?php endif; ?>"></li>
                    <li value="7" <?php if($skill->getCategory() == 7): ?> class="cur" <?php endif; ?>>音乐<input type="hidden" class="gotta" name="gotta[]" value="<?php if($skill->getCategory() == 7): echo $skill->getCategory(); ?><?php endif; ?>"></li>
                    <li value="8" <?php if($skill->getCategory() == 8): ?> class="cur" <?php endif; ?>>运动<input type="hidden" class="gotta" name="gotta[]" value="<?php if($skill->getCategory() == 8): echo $skill->getCategory(); ?><?php endif; ?>"></li>
                    <li value="9" <?php if($skill->getCategory() == 9): ?> class="cur" <?php endif; ?>>演出<input type="hidden" class="gotta" name="gotta[]" value="<?php if($skill->getCategory() == 9): echo $skill->getCategory(); ?><?php endif; ?>"></li>
                    <li value="10" <?php if($skill->getCategory() == 10): ?> class="cur" <?php endif; ?>>亲子<input type="hidden" class="gotta" name="gotta[]" value="<?php if($skill->getCategory() == 10): echo $skill->getCategory(); ?><?php endif; ?>"></li>
                    
                    <input type="hidden" name="gottasum" id="gottasum" value="<?php if($skill->getCategory() > 0 ) : echo 1; endif;?>">
                </ul>
                
                <div class="wrap-addzy"><i>年龄段</i><span></span></div>
                <ul class="wrap-addbqli nld">
                    <li value="12" <?php if($skill->getMinAge() == 99): ?> class="cur" <?php endif; ?>>全适用<input type="hidden" class="age" name="age[]" value="<?php if($skill->getMinAge() == 99): ?>12<?php endif; ?>"></li>
                    <li value="1" <?php if($skill->getMinAge() == 0): ?> class="cur" <?php endif; ?>>0岁<input type="hidden" class="age" name="age[]" value="<?php if($skill->getMinAge() == 0): echo $skill->getMinAge(); ?><?php endif; ?>"></li>
                    <li value="2" <?php if($skill->getMinAge() == 1): ?> class="cur" <?php endif; ?>>1岁<input type="hidden" class="age" name="age[]" value="<?php if($skill->getMinAge() == 1): echo $skill->getMinAge(); ?><?php endif; ?>"></li>
                    <li value="3" <?php if($skill->getMinAge() == 2): ?> class="cur" <?php endif; ?>>2岁<input type="hidden" class="age" name="age[]" value="<?php if($skill->getMinAge() == 2): echo $skill->getMinAge(); ?><?php endif; ?>"></li>
                    <li value="4" <?php if($skill->getMinAge() == 3): ?> class="cur" <?php endif; ?>>3岁<input type="hidden" class="age" name="age[]" value="<?php if($skill->getMinAge() == 3): echo $skill->getMinAge(); ?><?php endif; ?>"></li>
                    <li value="5" <?php if($skill->getMinAge() == 4): ?> class="cur" <?php endif; ?>>4岁<input type="hidden" class="age" name="age[]" value="<?php if($skill->getMinAge() == 4): echo $skill->getMinAge(); ?><?php endif; ?>"></li>
                    <li value="6" <?php if($skill->getMinAge() == 5): ?> class="cur" <?php endif; ?>>5岁<input type="hidden" class="age" name="age[]" value="<?php if($skill->getMinAge() == 5): echo $skill->getMinAge(); ?><?php endif; ?>"></li>
                    <li value="7" <?php if($skill->getMinAge() == 6): ?> class="cur" <?php endif; ?>>6岁<input type="hidden" class="age" name="age[]" value="<?php if($skill->getMinAge() == 6): echo $skill->getMinAge(); ?><?php endif; ?>"></li>
                    <li value="8" <?php if($skill->getMinAge() == 7): ?> class="cur" <?php endif; ?>>7-8岁<input type="hidden" class="age" name="age[]" value="<?php if($skill->getMinAge() == 7): echo $skill->getMinAge(); ?><?php endif; ?>"></li>
                    <li value="9" <?php if($skill->getMinAge() == 9): ?> class="cur" <?php endif; ?>>9-10岁<input type="hidden" class="age" name="age[]" value="<?php if($skill->getMinAge() == 9): echo $skill->getMinAge(); ?><?php endif; ?>"></li>
                    <li value="10" <?php if($skill->getMinAge() == 11): ?> class="cur" <?php endif; ?>>11-12岁<input type="hidden" class="age" name="age[]" value="<?php if($skill->getMinAge() == 11): echo $skill->getMinAge(); ?><?php endif; ?>"></li>
                    <li value="11" <?php if($skill->getMinAge() == 13): ?> class="cur" <?php endif; ?>>13-14岁<input type="hidden" class="age" name="age[]" value="<?php if($skill->getMinAge() == 13): echo $skill->getMinAge(); ?><?php endif; ?>"></li>
                    
                    <input type="hidden" name="agesum" id="agesum" value="<?php if($skill->getMinAge() >= 0 ) : echo 1; endif;?>">
                </ul>
                
                <div class="wrap-addzy"><i>能力</i><span></span></div>
                <ul class="wrap-addbqli nl">
                    <li value="创造力" <?php if($skill->searchTag('创造力') == 1): ?> class="cur" <?php endif; ?>>创造力<input type="hidden" class="ability" name="ability[]" value="<?php if($skill->searchTag('创造力') == 1): ?>创造力<?php endif; ?>"></li>
                    <li value="记忆力" <?php if($skill->searchTag('记忆力') == 1): ?> class="cur" <?php endif; ?>>记忆力<input type="hidden" class="ability" name="ability[]" value="<?php if($skill->searchTag('记忆力') == 1): ?>记忆力<?php endif; ?>"></li>
                    <li value="认知能力" <?php if($skill->searchTag('认知能力') == 1): ?> class="cur" <?php endif; ?>>认知能力<input type="hidden" class="ability" name="ability[]" value="<?php if($skill->searchTag('认知能力') == 1): ?>认知能力<?php endif; ?>"></li>
                    <li value="推理能力" <?php if($skill->searchTag('推理能力') == 1): ?> class="cur" <?php endif; ?>>推理能力<input type="hidden" class="ability" name="ability[]" value="<?php if($skill->searchTag('推理能力') == 1): ?>推理能力<?php endif; ?>"></li>
                    <li value="注意力" <?php if($skill->searchTag('注意力') == 1): ?> class="cur" <?php endif; ?>>注意力<input type="hidden" class="ability" name="ability[]" value="<?php if($skill->searchTag('注意力') == 1): ?>注意力<?php endif; ?>"></li>
                    <li value="计算能力" <?php if($skill->searchTag('计算能力') == 1): ?> class="cur" <?php endif; ?>>计算能力<input type="hidden" class="ability" name="ability[]" value="<?php if($skill->searchTag('计算能力') == 1): ?>计算能力<?php endif; ?>"></li>
                    <li value="空间想象" <?php if($skill->searchTag('空间想象') == 1): ?> class="cur" <?php endif; ?>>空间想象<input type="hidden" class="ability" name="ability[]" value="<?php if($skill->searchTag('空间想象') == 1): ?>空间想象<?php endif; ?>"></li>
                    <li value="语言表达" <?php if($skill->searchTag('语言表达') == 1): ?> class="cur" <?php endif; ?>>语言表达<input type="hidden" class="ability" name="ability[]" value="<?php if($skill->searchTag('语言表达') == 1): ?>语言表达<?php endif; ?>"></li>
                    <li value="肢体协调" <?php if($skill->searchTag('肢体协调') == 1): ?> class="cur" <?php endif; ?>>肢体协调<input type="hidden" class="ability" name="ability[]" value="<?php if($skill->searchTag('肢体协调') == 1): ?>肢体协调<?php endif; ?>"></li>
                    <li value="模仿能力" <?php if($skill->searchTag('模仿能力') == 1): ?> class="cur" <?php endif; ?>>模仿能力<input type="hidden" class="ability" name="ability[]" value="<?php if($skill->searchTag('模仿能力') == 1): ?>模仿能力<?php endif; ?>"></li>
                    <li value="自我保护" <?php if($skill->searchTag('自我保护') == 1): ?> class="cur" <?php endif; ?>>自我保护<input type="hidden" class="ability" name="ability[]" value="<?php if($skill->searchTag('自我保护') == 1): ?>自我保护<?php endif; ?>"></li>
                    
                    <input type="hidden" name="abilitysum" id="abilitysum" value="<?php echo $skill->countTag(); ?>">
                </ul>
                
            </div>
        </div>
    </div>
     <input type="hidden" name="status" id="status" value="0" />       
     <input type="hidden" name="skill_id"  value="<?php echo $skill->getId(); ?>" />   
    <!--最终的内容详情提交项-->
    <textarea id="subcontent" name="content" style="display:none;"></textarea>
    </form>
</div>
<script>
var editor;
KindEditor.ready(function(K) {
	editor = K.editor({
		allowFileManager : false,
                uploadJson : '<?php echo url_for('skill/upload_img') ?>',
	});
	
	//添加图片
	K('#icon-image').click(function() {
		editor.loadPlugin('image', function() {
			editor.plugin.imageDialog({
				clickFn : function(url, title, width, height, border, align) {
					var wraphtml = K('#sortable').html(),
					addlihtml = '<li value="2"><span class="oper-wrap"><i class="licedit"></i><i class="lidel"></i></span><div class="Contditor"><center><img src="'+url+'" /></center></div><textarea class="smallcont" name="smallcont[]">IMAGE+===+<center><img src="'+url+'" /></center></textarea></li>';
					K('#sortable').html(wraphtml+addlihtml);
					
					editor.hideDialog();
					bodyscrolltop();
				}
			});
		});
	});
	
	//添加封面
	K('#homeimgdiv').click(function(){
		editor.loadPlugin('image', function() {
			editor.plugin.imageDialog({
				imageUrl : K('#homeimg').val(),
				clickFn : function(url, title, width, height, border, align){
					K('#homeimgdiv').html('<img src="'+url+'">');
					K('#homeimgdiv').css("background","none");
					K('#homeimgdiv').css("line-height","1.5em");
					K('#homeimgdiv').css("height","auto");
					K('#homeimg').val(url);
					editor.hideDialog();
				}
			});
		});
	});
	
	//添加段落标题
	K('#icon-tp').click(function(){
		dialog = K.dialog({
			width : 700,
			title : '文字编辑',
			body: '<input type="text" id="smalltitle" style="width:100%;font-size:20px;color:#808080;border:none;padding:10px;" placeholder="请输入段落标题">',
			
			closeBtn : {
				name : '关闭',
				click : function(e){
					dialog.remove();
				}
			},
			yesBtn : {
				name : '确定',
				click : function(e){
					var smalltitle = K('#smalltitle').val(),
						wraphtml = K('#sortable').html(),
						addlihtml = '<li value="3" style="padding:0px;"><span class="oper-wrap"><i class="licedit"></i><i class="lidel"></i></span><div class="test_timain" style="padding-top:0px;"><div class="test_box" contenteditable="true">'+smalltitle+'</div></div><textarea class="smallcont" name="smallcont[]">SMALLTITLE+===+<p>'+smalltitle+'</p></textarea></li>';
					K('#sortable').html(wraphtml+addlihtml);
					dialog.remove();
					bodyscrolltop();
				}
			},
			noBtn : {
				name : '取消',
				click : function(e) {
					dialog.remove();
				}
			}
		});
	});
	
	//添加文字区块
	K('#icon-text').click(function(){
			dialog = K.dialog({
			width : 700,
			title : '文字编辑',
			body: '<iframe src="<?php echo url_for('skill/editor'); ?>" name="child" width="700" height="300" frameborder="0" scrolling="no"></iframe>',
//                        body: '<textarea id="editcontent" name="editcontent" style="width:700px;height:300px;"></textarea>',
			closeBtn : {
				name : '关闭',
				click : function(e){
					dialog.remove();
				}
			},
			yesBtn : {
				name : '确定',
				click : function(e){
					var content = window.child.childFunction(),
//                                        var content = $("#editcontent").val(),
						wraphtml = K('#sortable').html(),
						addlihtml = '<li value="1"><span class="oper-wrap"><i class="licedit"></i><i class="lidel"></i></span><div class="Contditor">'+content+'</div><textarea class="smallcont" name="smallcont[]">CONTENT+===+'+content+'</textarea></li>';
					K('#sortable').html(wraphtml+addlihtml);
					dialog.remove();
					bodyscrolltop();
				}
			},
			noBtn : {
				name : '取消',
				click : function(e) {
					dialog.remove();
				}
			}
		});
	});
});

$(document).ready(function(){
	//标题聚焦处理
	$("#test_title").click(function(){
		var khtml = $(this).html();
		if(khtml == "此处添加文章标题"){
			$(this).html("");
		}
	}).blur(function(){
		var khtml = $(this).html();
		if(khtml == ""){
			$(this).html("此处添加文章标题");
		}
	});
	
	//段落标题聚焦处理
	$('#sortable').on('click','.licedit',function(){
	
	});
	
	//修改内容
	$('#sortable').on('click','.licedit',function(){
		var ins = $(this).index(".licedit"),
			sorli = $('#sortable').children("li").eq(ins),
			Contditor = sorli.children('.Contditor'),
			smallcont = sorli.children('textarea'),
			lival = sorli.val(),
			lival = parseInt(lival);
			
			//保留原有的内容，用于未修改的还原
			var ylihtml = Contditor.html();
			//清除掉两个操作按钮
			//sorli.children(".oper-wrap").remove();
			
		if(lival == 1){ //修改文字
			var lihtml = Contditor.html();
			sessionStorage.lihtml="";
			sessionStorage.lihtml=lihtml;
			
			KindEditor.ready(function(K){
				var dialog = K.dialog({
					width : 700,
					title : '文字编辑',
					body : '<iframe src="<?php echo url_for('skill/editor'); ?>" name="childedit" width="700" height="300" frameborder="0" scrolling="no"></iframe>',
//                                        body : '<textarea id="editcontent" name="editcontent" style="width:700px;height:300px;">'+lihtml+'</textarea>',
					closeBtn : {
						name : '关闭',
						click : function(e){
							sessionStorage.lihtml=""; //清空：HTML 5 Web 存储
							Contditor.html(ylihtml); //还原区块显示内容
							smallcont.val(ylihtml); //还原区块提交内容
							dialog.remove();
						}
					},
					yesBtn : {
						name : '确定',
						click : function(e) {
							var editcont = window.childedit.childFunction();
//                                                        var editcont = $('#editcontent').val();
							Contditor.html(editcont);
							smallcont.val(editcont);
							sessionStorage.lihtml=""; //清空：HTML 5 Web 存储
							dialog.remove();
						}
					},
					noBtn : {
						name : '取消',
						click : function(e) {
							sessionStorage.lihtml=""; //清空：HTML 5 Web 存储
							Contditor.html(ylihtml); //还原区块显示内容
							smallcont.val(ylihtml); //还原区块提交内容
							dialog.remove();
						}
					}
				});
			});
		}else if(lival == 2){ //修改图片
			KindEditor.ready(function(K){
				var editor = K.editor({
					allowFileManager : true
				});
				editor.loadPlugin('image', function() {
					editor.plugin.imageDialog({
						clickFn : function(url, title, width, height, border, align) {
							sorli.html('<span class="oper-wrap"><i class="licedit"></i><i class="lidel"></i></span><div class="Contditor"><center><img src="'+url+'" /></center></div><textarea class="smallcont" name="smallcont[]"><center><img src="'+url+'" /></center></textarea>');
							editor.hideDialog();
						}
					});
				});
			});
		}else if(lival == 3){ //修改段落标题
			var smallti = sorli.children(".test_timain").children(".test_box").html();
			KindEditor.ready(function(K){
				dialog = K.dialog({
					width : 700,
					title : '文字编辑',
					body: '<input type="text" id="smalltitle" style="width:100%;font-size:20px;color:#808080;border:none;padding:10px;" value="'+smallti+'">',
					
					closeBtn : {
						name : '关闭',
						click : function(e){
							dialog.remove();
						}
					},
					yesBtn : {
						name : '确定',
						click : function(e){
							var smalltitle = K('#smalltitle').val();
								sorli.children(".test_timain").children(".test_box").html(smalltitle);
								sorli.children("textarea").val('SMALLTITLE+===+<p>'+smalltitle+'</p>');
								
							dialog.remove();
						}
					},
					noBtn : {
						name : '取消',
						click : function(e) {
							dialog.remove();
						}
					}
				});
			});
		}
	});
	
	//删除区块
	$("#sortable").on('click','.lidel',function(){
                 var ins=$(this).index(".lidel");
		layer.confirm('确定要删除本区块吗？', {
			title: "操作提醒",
			btn: ['确定','取消'] //按钮
		}, function(){
			$("#sortable").children("li").eq(ins).remove();
			layer.closeAll();
		}, function(){
			layer.closeAll();
		});
	});
	
	//标签选择，格式：checksum(选择器,取总ID,最大选择数);
	//必选标签选择
	$(".bx").children("li").click(function(){
		checksum($(this),"#gottasum",1);
	});
	
	//年龄段标签选择
	$(".nld").children("li").click(function(){
		checksum($(this),"#agesum",1);
	});
	
	//能力标签选择
	$(".nl").children("li").click(function(){
		checktag($(this),"#abilitysum",5);
	});
	
	//立即发布
	$("#formbottom").click(function(){
		var subton = true,
			subcontent = $(".test_content").html(), //内容
//			subtitle = $("#test_title").html(), //标题
                        subtitle = $("#test_title").text(), //标题
			homeimg = $("#homeimg").val(), //封面图片
			docsmallt = $("#docsmallt").val(), //摘要
			gottasum = parseInt($("#gottasum").val()); //必选标签总数
			
		//赋于最终值
		//标题
		if(subtitle=="此处添加文章标题"){
			layer.msg('请输入文章标题！');
			subton = false;
		}else if(subtitle.length > 100){
                    layer.msg('文章标题超长，最多只允许100个字符！');
			subton = false;
                }else{
			$("#subtitle").val(subtitle);
			subton = true;
		}
		
		if(subton){
			//内容
			$("#subcontent").val(subcontent);
		}
		
		if(subton){
			//封面图片
			if(homeimg.length<=0){
				layer.msg('请选择一张封面图片！');
				subton = false;
			}else{
				subton = true;
			}
		}
		
		if(subton){
			//摘要
			if(docsmallt.length<=0){
				layer.msg('请输入摘要！');
				subton = false;
			}else if(docsmallt.length > 75){
                            layer.msg('摘要超长，只能输入75个字符！');
				subton = false;
                        }else{
				subton = true;
			}
		}
		
		if(subton){
			//必选标签总数
			if(gottasum == 0){
				layer.msg('请选择文章必选标签！');
				subton = false;
			}else{
				subton = true;
			}
		}
		
		if(subton){ //提交form
			$('#queryForm').submit();  
		}
	});
	
	//存为草稿
	$("#formcgao").click(function(){
            $("#status").attr('value',5);
		$('#queryForm').submit();  
	});
});

function checksum(obj,idname,maxsum){
	var v = obj.children("input").val(),
		insum = parseInt($(idname).val());
		
	if(v == ""){
		if(insum < maxsum){
			var sum = insum+1;
			obj.children("input").val(obj.val());
			obj.addClass("cur");
			$(idname).val(sum);
		}else{
			layer.msg('此类标签最多可选'+maxsum+'顶！');
		}
	}else{
		var sum = insum-1;
		obj.children("input").val("");
		obj.removeClass("cur");
		$(idname).val(sum);
	}
}

function checktag(obj,idname,maxsum){
	var v = obj.children("input").val(),
		insum = parseInt($(idname).val());
		
	if(v == ""){
		if(insum < maxsum){
			var sum = insum+1;
			obj.children("input").val(obj.attr('value'));
			obj.addClass("cur");
			$(idname).val(sum);
		}else{
			layer.msg('此类标签最多可选'+maxsum+'顶！');
		}
	}else{
		var sum = insum-1;
		obj.children("input").val("");
		obj.removeClass("cur");
		$(idname).val(sum);
	}
}

//处理滚动条事件
function bodyscrolltop(){
	var h = $(document).height()-$(window).height(),
		uh = $("#sortable").height();
	if(uh > 450){
  		$('body,html').animate({'scrollTop':h},500);
	}
}

//<!--标签移动-->
$(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  });
</script>
